<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
		<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="statics/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="nav-tip">
			<span class="back"></span>
			<span>积分可用于查看电话、购买道具、会员等服务</span>
		</div>
		<div class="container">
			<div class="info">
				<h2>剩余积分</h2>
				<span>0</span>
				<h2 id="detail">查看积分明细</h2>
			</div>
			<h2>充值数量</h2>
			<div class="quick-pay">
				<ul>
					<li class="active">
						<div>
							<div>
								<span>15</span>积分
							</div>
							<div>
								<span>10</span>元
							</div>
						</div>
					</li>
					<li><div>
						<div>
							<span>30</span>积分
						</div>
						<div>
							<span>20</span>元
						</div>
					</div></li>
					<li><div>
						<span>60</span>积分
					</div>
					<div>
						<span>40</span>元
					</div></li>
					<li><div>
						<span>100</span>积分
					</div>
					<div>
						<span>70</span>元
					</div></li>
				</ul>
			</div>
			<h2>其他充值金额</h2>
			<div class="other-pay">
				<input type="text" name="money" value="" placeholder="0"/>
			</div>
			<h2>支付方式</h2>
			<div class="pay-type">
				<ul>
					<li class="active">
						<div class="type">
							<i class="wx"></i>
							<span>微信支付<sup>优惠</sup></span>
						</div>
						<i class="check"></i>
					</li>
					<li>
						<div class="type">
							<i class="ali"></i>
							<span>支付宝支付</span>
						</div>
						<i class="check"></i>
					</li>
					<li>
						<div class="type">
							<i class="bank"></i>
							<span>银联支付</span>
						</div>
						<i class="check"></i>
					</li>
					<li class="hidden">
						<div class="type">
							<i class="ali"></i>
							<span>花呗支付</span>
						</div>
						<i class="check"></i>
					</li>
				</ul>
				<p class="more">+&nbsp;<span>点击查看更多</span></p>
			</div>
			<!--充值金额-->
			<div class="money">
				<p>充值金额<span>￥ <i>10</i></span></p>
				<button id="btnOk">充值</button>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 充值数量
	$('.quick-pay ul li').click(function(){
		var money = $(this).find('span:last').text()
		$(this).addClass('active').siblings().removeClass('active')
		$('.money').find('i').text(money)
	})
	// 其他金额
	$('.other-pay input').bind('input propertychange',function(){
		if(!/^[0-9]*$/.test($(this).val()) || $(this).val()==0){
			$(this).val("")
			alert('请输入正确金额')
			return
		}
		$('.quick-pay ul li').removeClass('active')
		var money = $(this).val()
		$('.money').find('i').text(money)
	})
	// 支付方式选择
	$('.pay-type ul li').click(function(){
		$(this).addClass('active').siblings().removeClass('active')
	})
	// 查看更多
	$('.pay-type .more').click(function(){
		$(this).css('visibility','hidden')
		$('.pay-type ul li').removeClass('hidden')
	})
	$('#detail').click(function(){
	  Android.toList();
	})
	$('#btnOk').click(function(){
	  Android.recharge();
	})
</script>
